<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'
import { ref } from 'vue'
import { ElMessage , ElMessageBox} from 'element-plus'

//性别选择
const genderOptions = ref([
  { label: '男', value: '男' },
  { label: '女', value: '女' }
]);

// 部门下拉选项
const deptOptions = ref([
  { label: '销售部门', value: '销售部门' },
  { label: '售后部门', value: '售后部门' },
  { label: '市场营销部门', value: '市场营销部门' },
  { label: '客服服务部门', value: '客服服务部门' },
  { label: '管理部门', value: '管理部门' }
]);

const employee = ref([{
    "emId": '',
    "emName": '',
    "dept": '',
    "phone": '',
    "sex": '',
    "age": ''
}])

//模型
const employeeModel = ref({
    emId: '',
    emName: '',
    dept: '',
    phone: '',
    sex: '',
    age: ''
})

//条件查询模型
const employeeSearchModel = ref({
    emName: '',
    dept: ''
})

//清除数据
const clearData = ()=>{
    employeeModel.value={
        emId: '',
        emName: '',
        dept: '',
        phone: '',
        sex: '',
        age: ''
    }
}

//校验
const rules = ref({
    emName:[{required: true, message:"员工名不能为空", trigger:'blur'}],
    dept:[{required: true, message:"部门不能为空", trigger:'blur'}]
})

//控制标题显示
const title = ref('')
//控制添加用户弹窗
const dialogVisible = ref(false)

import { workEmployeeListService , workEmployeeAddService , workCustomDeleteService , workCustomUpdateService, workCustomSearchService, workEmployeeUpdateService, workEmployeeDeleteService, workEmployeeSearchService} from '@/api/work';

//调用查询接口
const workEmployeeList = async()=>{
    let result = await workEmployeeListService();
    employee.value = result.data;
}
workEmployeeList();

//调用添加接口
const addEmployee = async()=>{
    let result = await workEmployeeAddService(employeeModel.value);
    if(result.code === 0){
        ElMessage.success('添加成功');
    }else{
        ElMessage.error("添加失败");
    }
    workEmployeeList();
    dialogVisible.value = false;
}

//调用删除接口
const deleteEmployee = async(row)=>{
    ElMessageBox.confirm(
        '你确定要删除该员工信息吗?',
        '温馨提示',
        {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
        .then(async () => {
            let result = await workEmployeeDeleteService(row.emId);
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            workEmployeeList();
            })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '用户取消删除',
            })
        })
}

//修改弹窗
const showUpdate = async(row)=>{
    dialogVisible.value = true;
    title.value = '编辑员工信息';

    employeeModel.value.emId = row.emId;
    employeeModel.value.emName = row.emName;
    employeeModel.value.dept = row.dept;
    employeeModel.value.phone = row.phone;
    employeeModel.value.sex = row.sex;
    employeeModel.value.age = row.age;
}

//调用修改接口
const updateEmployee = async(row)=>{
    let result = await workEmployeeUpdateService(employeeModel.value);
    if(result.code === 0){
        ElMessage.success('修改成功');
    }else{
        ElMessage.error("修改失败");
    }
    await workEmployeeList();
    dialogVisible.value = false;
}

//调用条件查询接口
const search = async()=>{
    const searchParams = {
        emName: employeeSearchModel.value.emName,
        dept: employeeSearchModel.value.dept
    };
    try{
        let result = await workEmployeeSearchService(searchParams);
        employee.value = result.data || [];
        if(employee.value.length === 0){
            ElMessage.info("未找到匹配的数据");
        }
    }catch(error){
        ElMessage.error('搜索失败：' + error.message);
    }
}

//重置
const restForm = ()=>{
    employeeSearchModel.value.emName = '';
    employeeSearchModel.value.dept = '';
    workEmployeeList();
}

</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>员工管理</span>
                <div class="extra">
                    <el-button type="primary" @click="dialogVisible=true; title='添加员工'; clearData()">添加员工</el-button>
                </div>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline :model="employeeSearchModel">
            <el-form-item label="员工名：" prop="emName">
                <el-input v-model="employeeSearchModel.emName" placeholder="请输入员工名"></el-input>
            </el-form-item>
            <el-form-item label="部门：" prop="dept">
                <el-select v-model="employeeSearchModel.dept" placeholder="请选择部门" clearable style="width: 200px">
                <el-option v-for="(item, index) in deptOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="restForm">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="employee" style="width: 100%">
            <el-table-column label="序号" width="100" type="index"> </el-table-column>
            <el-table-column label="员工名" prop="emName"></el-table-column>
            <el-table-column label="部门" prop="dept"></el-table-column>
            <el-table-column label="手机号" prop="phone"></el-table-column>
            <el-table-column label="性别" prop="sex"></el-table-column>
            <el-table-column label="年龄" prop="age"></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default ="{row}">
                    <el-button :icon="Edit" circle plain type="primary" @click="showUpdate(row)"></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click="deleteEmployee(row)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 添加分类弹窗 -->
        <el-dialog v-model="dialogVisible" :title="title" width="30%">
            <el-form :model="employeeModel" :rules="rules" label-width="100px" style="padding-right: 30px">
                <el-form-item label="员工名" prop="emName">
                    <el-input v-model="employeeModel.emName" minlength="1" maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="部门" prop="dept">
                    <el-select v-model="employeeModel.dept" placeholder="请选择部门" clearable>
                    <el-option v-for="(item, index) in deptOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="employeeModel.phone" minlength="1" maxlength="15"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="employeeModel.sex">
                        <el-radio v-for="(item, index) in genderOptions" :key="index" :value="item.value">{{ item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="employeeModel.age" minlength="1" maxlength="15"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
             <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="title==='添加员工'? addEmployee(): updateEmployee()"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>